<div class="container">
	<gz-back-to-top></gz-back-to-top>
	<div id="scenecontent"></div>
</div>
<div id="dialog-addscene">
    <form>
        <table class="display" id="scenetable" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="right" style="width:60px"><label for="scenename"><span data-i18n="Name"></span>: </label></td>
          <td><input type="text" id="scenename" style="width: 250px; padding: .2em;" class="text ui-widget-content ui-corner-all" /></td>
        </tr>
        <tr>
			<td align="right" style="width:60px"><label><span data-i18n="Type"></span>: </label></td>
			<td>
				<select id="combotype" style="width:120px" class="combobox ui-corner-all">
					<option value="0" data-i18n="Scene">Scene</option>
					<option value="1" data-i18n="Group">Group</option>
				</select>
			</td>
        </tr>
	    </table>
    </form>
</div>
<div id="editscene" style="display:none;">
		<table class="display" id="paramstable" border="0" cellpadding="0" cellspacing="20">
            <tr>
                <td align="right" style="width:120px">
                    <label>Idx: </label>
                </td>
				<td><span id="deviceidx" /></td>
            </tr>
			<tr>
				<td align="right"><label for="devicename"><span data-i18n="Name"></span>: </label></td>
				<td><input type="text" id="devicename" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all" /></td>
			</tr>
			<tr>
				<td align="right"><label><span data-i18n="Type"></span>: </label></td>
				<td>
					<select id="combotype" style="width:120px" class="combobox ui-corner-all">
						<option value="0" data-i18n="Scene">Scene</option>
						<option value="1" data-i18n="Group">Group</option>
					</select>
				</td>
			</tr>
			<tr id="ProtectionDiv">
				<td align="right"><span data-i18n="Protected">Protected</span>:</td>
				<td><input type="checkbox" id="protected"><label for="protected"/></td>
			</tr>
			<tr id="OnActionDiv">
				<td align="right"><label for="onaction"><span data-i18n="On Action">On Action</span>:</label></td>
				<td><input type="text" id="onaction" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all" /> <span data-i18n="(Should start with http:// or script://)">(Should start with http://, https:// or script://)</span></td>
			</tr>
			<tr id="OffActionDiv">
				<td align="right"><label for="offaction"><span data-i18n="Off Action">Off Action</span>:</label></td>
				<td><input type="text" id="offaction" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all" /> <span data-i18n="(Should start with http:// or script://)">(Should start with http://, https:// or script://)</span></td>
			</tr>
			<tr>
				<td align="right" style="width:120px"><label for="devicedescription"><span data-i18n="Description"></span>: </label></td>
				<td><textarea id="devicedescription" name="devicedescription" rows="4" style="width: 356px; padding: .2em;" class="text ui-widget-content ui-corner-all"></textarea></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a class="btnstyle3" onclick="SaveScene();" data-i18n="Save">Save</a>&nbsp;&nbsp;&nbsp;
					<a class="btnstyle3" onclick="DeleteScene();" data-i18n="Delete">Delete</a>
				</td>
			</tr>
		</table>
		<br>
		<h2><span data-i18n="Activation Devices">Activation Devices</span>:</h2>
		<br>
		<table class="display" id="scenedactivationtable" border="0" cellpadding="0" cellspacing="0" width="100%">
			<thead>
				<tr valign="middle">
					<th align="left" width="70">Idx</th>
					<th align="left" data-i18n="Name">Name</th>
					<th align="left" width="70" data-i18n="Code">Code</th>
				</tr>
			</thead>
		</table>
		<table id="delclract" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td>
					<a class="btnstyle3-dis" id="removecode" data-i18n="Remove Device">Remove Device</a>
					<button id="addcode" class="btn btn-small btn-success" type="button" onclick="AddCode();" data-i18n="Add Device">Add Device</button>
				</td>
				<td align="right">
					<a class="btnstyle3" onclick="ClearCodes();" data-i18n="Clear">Clear</a>
				</td>
			</tr>
		</table>
		
		<span id="learndevicename"></span>
		<br>
		<br>
		<h2><span data-i18n="Devices">Devices</span>:</h2>
		<br>
		<table class="display" id="scenedevicestable" border="0" cellpadding="0" cellspacing="0" width="100%">
				<thead>
						<tr valign="middle">
								<th align="left" data-i18n="Name">Name</th>
								<th align="right" width="100" id="CommandHeader" data-i18n="Command">Command</th>
								<th align="right" width="70" data-i18n="Level">Level</th>
								<th align="center" width="90" data-i18n="On Delay">On Delay</th>
								<th align="center" width="90" data-i18n="Off Delay">Off Delay</th>
								<th align="center" width="40" data-i18n="Order">Order</th>
						</tr>
				</thead>
		</table>
		<table id="delclr" border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr>
				<td>
					<a class="btnstyle3-dis" id="updatedelete" data-i18n="Update">Update</a>
					<a class="btnstyle3-dis" id="devicedelete" data-i18n="Delete">Delete</a>
				</td>
				<td align="right">
					<a class="btnstyle3" onclick="ClearDevices();" data-i18n="Clear">Clear</a>
				</td>
			</tr>
		</table>
		<br>
		<table class="display" id="paramstable" border="0" cellpadding="0" cellspacing="20">
			<tr>
				<td align="right" style="width:110px"><label for="combodevice"><span data-i18n="Device"></span>: </label></td>
				<td>
					<select id="combodevice" style="width:250px" class="combobox ui-corner-all">
					</select>
					<a class="btnstyle3" onclick="AddDevice();" data-i18n="Add">Add</a>
				</td>
			</tr>
			<tr  id="CommandDiv">
				<td align="right" style="width:80px"><label for="combocommand"><span data-i18n="Command"></span>:</label></td>
				<td>
					<select id="combocommand" style="width:90px" class="combobox ui-corner-all">
					<option value="On" data-i18n="On">On</option>
					<option value="Off" data-i18n="Off">Off</option>
					<option value="Stop" data-i18n="Stop">Stop</option>
					</select>
				</td>
			</tr>
			<tr id="LevelDiv">
				<td align="right" style="width:80px"><label for="combolevel"><span data-i18n="Level"></span>:</label></td>
				<td>
					<select id="combolevel" style="width:70px" class="combobox ui-corner-all">
					</select>
				</td>
			</tr>
			<tr  id="DelayOnDiv">
				<td align="right" style="width:80px"><label for="ondelaytime"><span data-i18n="On Delay"></span>:</label></td>
				<td><input type="text" id="ondelaytime" style="width: 50px; padding: .2em;" class="text ui-widget-content ui-corner-all" />&nbsp;(<span data-i18n="Seconds"></span>)</td>
			</tr>
			<tr  id="DelayOffDiv">
				<td align="right" style="width:80px"><label for="offdelaytime"><span data-i18n="Off Delay"></span>:</label></td>
				<td><input type="text" id="offdelaytime" style="width: 50px; padding: .2em;" class="text ui-widget-content ui-corner-all" />&nbsp;(<span data-i18n="Seconds"></span>)</td>
			</tr>
			<tr id="ScenesLedColor">
				<td align="right">
					<label>
						<span data-i18n="Color">Color</span>:
					</label>
				</td>
				<td>
					<table class="display colorpicker" border="0" cellpadding="0" cellspacing="0">
						<tr id="ColorMode">
							<td style="padding-left:0px">
								<a><img src="images/RGB48.png" class="lcursor pickermodergb unselected" height="48" width="48"></a>
								<a><img src="images/RGB48_Sel.png" class="lcursor pickermodergb selected" height="48" width="48"></a>
								<a><img src="images/Coltemp48.png" class="lcursor pickermodetemp unselected" height="48" width="48"></a>
								<a><img src="images/Coltemp48_Sel.png" class="lcursor pickermodetemp selected" height="48" width="48"></a>
								<a><img src="images/White48.png" class="lcursor pickermodewhite unselected" height="48" width="48"></a>
								<a><img src="images/White48_Sel.png" class="lcursor pickermodewhite selected" height="48" width="48"></a>
								<a><img src="images/Customw48.png" class="lcursor pickermodecustomw unselected" height="48" width="48"></a>
								<a><img src="images/Customw48_Sel.png" class="lcursor pickermodecustomw selected" height="48" width="48"></a>
								<a><img src="images/Customww48.png" class="lcursor pickermodecustomww unselected" height="48" width="48"></a>
								<a><img src="images/Customww48_Sel.png" class="lcursor pickermodecustomww selected" height="48" width="48"></a>
							</td>
						</tr>
						<tr>
							<td align="left" style="width:200px;padding-left:0px">
								<input type="text" id="popup_picker"  data-wheelcolorpicker="" data-wcp-layout="block" data-wcp-sliders="wvkl"/>
							</td>
						</tr>
						<tr class="pickerrgbcolorrow">
							<td align="left" style="width:200px;padding-left:0px">
								{{:: 'RGB Color:' | translate }} <input type="text" class="pickerrgbcolorinput">
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<br>
</div>
